<template>
  <div>
    <div class="addd">
      <el-input
        class="addClass"
        placeholder="请输入内容"
        v-model="input"
        clearable
        @keyup.enter.native="addlist"
      >
      </el-input>
      <el-button @click="addlist">新增</el-button>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="类别名称" prop="name">
          <template slot-scope="scope">
            <div v-if="scope.row.id == isShow.id">
              <el-input
                class="addClass"
                v-model="isShow.name"
                @keyup.enter.native="updateList"
              ></el-input>
              <el-button @click="updateList" type="success">保存</el-button>
              <el-button @click="cancel">取消</el-button>
            </div>
            <div v-else>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editList(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeList(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  layout: "msbd",
  data() {
    return {
      input: "",
      isShow: {},
      oldValue: {},
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    ...mapActions("users", [
      "getClassify",
      "addClassify",
      "removeClassify",
      "updatedClassify",
    ]),
    async addlist() {
      await this.addClassify(this.input);
      this.input = "";
    },
    async removeList(row) {
      if (confirm("确定要删除嘛?")) {
        await this.removeClassify(row);
        this.$message({ message: "删除成功!", type: "success" });
      }
    },
    async updateList() {
      await this.updatedClassify(this.isShow);
      this.isShow = {};
      this.oldValue = {};
    },
    cancel() {
      this.isShow = this.oldValue;
      this.isShow = {};
    },
    editList(row) {
      this.oldValue = { ...row };
      this.isShow = { ...row };
    },
  },
  computed: {
    ...mapState("users", ["tableData"]),
  },
};
</script>

<style scoped>
.addd {
  margin-bottom: 5px;
}
.addClass {
  width: 200px;
}

.isShow {
  display: none;
}
</style>